<section class="p-4 lg:p-8" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container mx-auto space-y-12">
		<div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row">
			<img
				src="https://source.unsplash.com/640x480/?1"
				class="h-80 bg-gray-500 aspect-video"
				alt=""
			/>
			<div class="flex flex-col justify-center flex-1 p-6" [ngClass]="['bg' + contrast]">
				<span class="text-xs uppercase" [ngClass]="['text' + plainInv]">
					Join, it's free
				</span>
				<h3 class="text-3xl font-bold">We're not reinventing the wheel</h3>
				<p class="my-6" [ngClass]="['text' + plainInv]">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam possimus
					quas, error esse quos.
				</p>
				<button class="self-start" type="button">Action</button>
			</div>
		</div>
		<div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row-reverse">
			<img
				src="https://source.unsplash.com/640x480/?2"
				class="h-80 bg-gray-500 aspect-video"
				alt=""
			/>
			<div class="flex flex-col justify-center flex-1 p-6" [ngClass]="['bg' + contrast]">
				<span class="text-xs uppercase" [ngClass]="['text' + plainInv]">
					Join, it's free
				</span>
				<h3 class="text-3xl font-bold">We're not reinventing the wheel</h3>
				<p class="my-6" [ngClass]="['text' + plainInv]">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam possimus
					quas, error esse quos.
				</p>
				<button class="self-start" type="button">Action</button>
			</div>
		</div>
		<div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row">
			<img
				src="https://source.unsplash.com/640x480/?3"
				class="h-80 bg-gray-500 aspect-video"
				alt=""
			/>
			<div class="flex flex-col justify-center flex-1 p-6" [ngClass]="['bg' + contrast]">
				<span class="text-xs uppercase" [ngClass]="['text' + plainInv]">
					Join, it's free
				</span>
				<h3 class="text-3xl font-bold">We're not reinventing the wheel</h3>
				<p class="my-6" [ngClass]="['text' + plainInv]">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam possimus
					quas, error esse quos.
				</p>
				<button class="self-start" type="button">Action</button>
			</div>
		</div>
	</div>
</section>
